<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input v-model="formInline.user" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="启用" value="shanghai"></el-option>
              <el-option label="禁用" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button>清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" class="addbutton"><i class="el-icon-edit"></i>新增目录</el-button>
          </el-form-item>
        </el-form>
        <div class="black"><i class="el-alert__icon el-icon-info"></i>数据一共{{}}条</div>
        <el-table :data="list">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="directoryName" label="目录名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column label="创建日期">
            <template #default="{ row }">
              {{ formatDate(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" />
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="150">
            <template>
              <el-button type="text" size="small">禁用</el-button>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :total="total"
            background
            :current-page="query.page"
            :page-size="query.size"
            :page-sizes="[10, 5, 20, 2]"
            @current-change="changePage"
            @size-change="changeSize"
            layout="prev, pager, next,sizes"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/directorys.js'
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import dayjs from 'dayjs'

export default {
  name: 'directory',
  components: {},
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      list: [],
      query: {
        page: 1, // 当前页
        size: 10 // 每页条数
      },
      total: 0 // 总数
    }
  },
  created() {
    getCompanys()
    getQuestion()
    this.getList()
  },
  methods: {
    // str='默认值' str如果不传 读取默认值'YYYY-MM-DD'
    formatDate(value, str = 'YYYY-MM-DD') {
      return dayjs(value).format(str)
    },
    // 获取员工列表
    async getList() {
      const { data } = await list(this.query)
      console.log(data)
      this.list = data.items
      this.total = data.counts
    },
    // 页码切换
    changePage(page) {
      console.log(page)
      // 根据新页码请求数据=》刷列表
      this.query.page = page
      this.getList()
    },

    // 每页显示条数切换
    changeSize(size) {
      console.log(size)
      this.query.size = size
      this.getList()
    }
  }
}
</script>
<style scoped>
.black {
  height: 36px;
  background-color: #f4f4f5;
  font-size: 13px;
  line-height: 36px;
  border-radius: 5px;
  padding-left: 20px;
  color: #909399;
}
.addbutton {
  margin-left: 460px;
}
</style>
